<template>
  <div style="margin: 10px">
    <div class="banner flexBox">
      <swiper
        v-if="banner.length > 0"
        ref="mySwiper"
        class="mySwiper swiper-container"
        :options="swiperOptions"
      >
        <swiper-slide
          v-for="(item, index) in banner"
          :key="index"
          @click.native="itemClick(item)"
        >
          <img
            :src="item.bannerImg"
            alt=""
          ></swiper-slide>
        <div slot="pagination" class="swiper-pagination" />
        <div slot="button-prev" class="swiper-button-prev" />
        <div slot="button-next" class="swiper-button-next" />
      </swiper>
      <span v-else class="banner-text">暂无图片</span>
    </div>
    <div class="upload-img">
      <el-upload
        class="avatar-uploader"
        action
        :show-file-list="false"
        style="margin: 20px; float: left"
        :http-request="uploadImage"
      >
        <img
          v-if="bannerInfo.bannerImg"
          :src="bannerInfo.bannerImg"
          class="avatar"
        >
        <i v-else class="el-icon-plus avatar-uploader-icon" style="" />
      </el-upload>
      <el-input v-model="bannerInfo.bannerLink" placeholder="请输入链接" />
    </div>
    <div class="btn">
      <el-button type="primary" @click="onSubmit">确认</el-button>
    </div>
  </div>
</template>

<script>
import { upload } from '@/fs'
import { getBanner, updateBanner } from '@/api/banner'
import { Indicator } from 'mint-ui'
// import { Swiper, SwiperSlide } from "swiper/vue";
export default {
  components: {
    // Swiper,
    // SwiperSlide,
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      banner: [],
      bannerInfo: {
        bannerImg: '',
        bannerLink: ''
      }
    }
  },
  computed: {
    swiper() {
      const swiper = this.$refs.mySwiper.$swiper
      swiper.slideTo(0, 1000, false)
      // 鼠标移出隐藏按钮，移入显示按钮
      swiper.el.onmouseover = function() {
        swiper.navigation.$nextEl.removeClass('hide')
        swiper.navigation.$prevEl.removeClass('hide')
      }
      swiper.el.onmouseout = function() {
        swiper.navigation.$nextEl.addClass('hide')
        swiper.navigation.$prevEl.addClass('hide')
      }
      return swiper
    },
    swiperOptions() {
      const swiperOptions = {
        observer: true,
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        preventClicksPropagation: true,
        // loop: true, // 循环模式选项
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
      return swiperOptions
    }
  },
  created() {
    this.getBanner()
  },
  methods: {
    // 轮播图确认
    onSubmit() {
      if (this.bannerImg === '') {
        this.$message.warning('轮播图未设置')
        return
      }
      Indicator.open('正在编辑中，请稍后。。。')
      updateBanner([this.bannerInfo])
        .then((res) => {
          Indicator.close()
          if (res.code === 200) {
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
          this.getBanner()
          this.bannerInfo = {
            bannerImg: '',
            bannerLink: ''
          }
        })
        .catch(() => {
          Indicator.close()
        })
      this.$forceUpdate()
    },
    itemClick(item) {
      this.bannerInfo = { ...item }
    },
    getBanner() {
      getBanner().then((res) => {
        this.banner = res
      })
    },
    uploadImage({ file }) {
      upload(file).then((res) => {
        this.bannerInfo.bannerImg = res.code
      })
    }
  }
}
</script>

<style lang="less" scoped>
.banner {
  height: 420px;
  width: 1240px;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  .banner-text {
    font-size: 14px;
    font-weight: 400;
    margin: 0 auto;
    color: rgb(151, 151, 151);
  }
}
.mySwiper {
  height: 100%;
  width: 100%;
  .swiper-slide {
    height: 100%;
    background: #4390ee;
    color: #fff;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .swiper-container {
    --swiper-theme-color: #ff6600;
    --swiper-pagination-color: #00ff33; /* 两种都可以 */
  }
}
.swiper-container .hide {
  opacity: 0;
}
.swiper-button-next,
.swiper-button-prev {
  transition: opacity 0.5s;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.upload-img {
  width: 300px;
  padding: 20px;
  text-align: center;
  margin: 0 auto;
  .el-input {
    margin: 10px 0;
  }
}
.btn {
  margin: 0 auto;
  text-align: center;
}
</style>
